#set( $symbol_pound = '#' )
#set( $symbol_dollar = '$' )
#set( $symbol_escape = '\' )
<!--
 * @Author: liuc
 * @Date: 2020-04-28 14:56:08
 * @Description: 登录页面
 -->
<!DOCTYPE html>
<meta content="text/html;charset=utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    h1 {
        text-align: center
    }

    .wrap {
        width: 480px;
        height: 430px;
        background-color: ${symbol_pound}fff;
        padding: 40px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        box-shadow: 0.3rem 0.3rem 3rem ${symbol_pound}999d9c;
        box-sizing: border-box;
    }

    .login-title {
        text-align: center;
        padding-bottom: 34px;
        font-size: 18px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 600;
        color: rgba(22, 94, 159, 1);
        border-bottom: 1px solid rgba(224, 224, 224, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-title img {
        width: 130px;
        margin-right: 15px;
    }

    .login-title .slogan {
        text-align: center;
        font-size: 18px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 600;
        color: ${symbol_pound}165e9f;
        letter-spacing: 6px;
    }

    .tips {
        width: 56px;
        height: 36px;
        display: block;
        float: left;
        line-height: 36px;
        text-align: justify;
    }

    .tips i {
        display: inline-block;
        width: 100%;
    }

    ${symbol_pound}username,
    ${symbol_pound}password {
        width: 306px;
        height: 36px;
        border: 1px solid ${symbol_pound}ccc;
        margin-left: 10px;
        padding-left: 10px;
    }

    ul {
        list-style-type: none;
        margin-top: 40px;
    }

    li {
        margin-top: 20px;
        margin-left: 8px;
        height: 65px;
    }

    ul:last-child {
        padding-right: 8px;
    }

    .btn-primary {
        width: 100%;
        height: 38px;
        cursor: pointer;
        background-color: ${symbol_pound}4399d3;
        color: ${symbol_pound}fff;
        border: 0;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 8px;
    }
</style>

<body>
<div class="wrap">
    <div class="login-title">
        <img class="logo" src="http://oss.cloudscope.cn/public/logo.png"/>
        <span class="slogan">云科凯创单点登陆系统</span>
    </div>
    <form method="post" id="confirmationForm" name="confirmationForm" onsubmit="return check()"
          action="/api/v1/auth/yk/login">
        <ul>
            <li><span class="tips">用户名<i></i></span><input type="text" name="username" id="username">&nbsp;&nbsp;<p
                    id="usermsg"></p>
            </li>
            <li><span class="tips">密码<i></i></span><input type="password" name="password"
                                                          id="password">&nbsp;&nbsp;<p id="passwordmsg"></p></li>
            <li>
                <input type="submit" value="登录" class="btn btn-primary">
            </li>
        </ul>
    </form>
</div>

<script>
    function check() {
        // 检验姓名是否合法
        var name = document.getElementById("username").value;
        var userMsg = document.getElementById("usermsg");
        if (name.length <= 0) {
            userMsg.innerHTML = "用户名不能为空!";
            userMsg.style.color = "red";
            userMsg.style.fontSize = "13px";
            userMsg.style.marginLeft = "64px";
            userMsg.style.marginTop = "-12px";
            return false;
        }
        // 检验姓名是否合法
        var password = document.getElementById("password").value;
        var passwordMsg = document.getElementById("passwordmsg");
        if (password.length <= 0) {
            passwordMsg.innerHTML = "密码不能为空!";
            passwordMsg.style.color = "red";
            passwordMsg.style.fontSize = "13px";
            passwordMsg.style.marginLeft = "64px";
            passwordMsg.style.marginTop = "-12px";
            return false;
        }
        return true;
    }
</script>
</body>

</html>
